<template>
  <div class="top-select-pc">
    <el-form ref="queryForm" :model="queryParams" size="mini" inline>
      <el-form-item prop="deptId">
        <el-cascader
          class="dept-tree"
          v-model="checkedDeptIds"
          :options="deptTree"
          :show-all-levels="false"
          :props="{ checkStrictly: true }"
          :placeholder="showDeptName"
          @change="changeDeptIds"
          @visible-change="deptVisibleChange"
        />
      </el-form-item>
      <el-form-item prop="processType">
        <el-select v-model="queryParams.processType" placeholder="过程分类" style="width: 100px" @change="changeProcessType">
          <div class="el-select-group__title" style="zoom: 0.9">选择过程分类</div>
          <el-option v-for="item in processTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="rdcType">
        <el-select v-model="queryParams.rdcType" placeholder="检查类型" style="width: 100px" @change="changeRdcType">
          <div class="el-select-group__title" style="zoom: 0.9">选择检查类型</div>
          <el-option v-for="item in rdcTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="startTime">
        <el-date-picker v-model="monthRange" type="monthrange" value-format="yyyy-MM" :clearable="false" :picker-options="monthPickerOpts" style="width: 200px" @change="changeMonth" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 顶部选择框，用于 PC 端
import moment from 'moment'
import { getPathFromTree } from '@/utils'
import { processTypeList, rdcTypeList } from '../utils/common'

export default {
  props: {
    deptTree: { type: Array, default: () => [] },
    deptMap: { type: Object, default: () => ({}) },
    value: {
      type: Object,
      default: () => ({
        deptId: '',
        processType: '',
        rdcType: '',
        monthFrom: '',
        monthTo: ''
      })
    }
  },
  data() {
    const now = +new Date()
    return {
      rdcTypeList,
      processTypeList,
      selectDeptId: '',
      checkedDeptIds: [],
      monthRange: [],
      pickDate: {},
      monthPickerOpts: {
        onPick: pick => (this.pickDate = pick),
        disabledDate: date => {
          if (date > now) return true
          // 间隔小于一年
          const { minDate, maxDate } = this.pickDate
          if (minDate && !maxDate && Math.abs(moment(minDate).diff(moment(date), 'years')) >= 1) return true
        }
      }
    }
  },
  computed: {
    queryParams: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    showDeptName() {
      const { deptId } = this.queryParams
      if (!deptId) return ''
      const item = this.deptMap[deptId]
      return item?.label || ''
    }
  },
  watch: {
    queryParams: {
      deep: true,
      immediate: true,
      handler(val) {
        const { monthFrom, monthTo } = val || {}
        if (monthFrom && monthTo) this.monthRange = [monthFrom, monthTo]
        else this.monthRange = []
        this.coverDeptIds()
      }
    }
  },
  methods: {
    coverDeptIds() {
      const { deptId } = this.queryParams
      const ids = this.checkedDeptIds
      const lastId = ids[ids.length - 1] || ''
      if (deptId === lastId) return
      if (!deptId) return (this.checkedDeptIds = [])
      // 当前部门的各级 id
      this.checkedDeptIds = getPathFromTree(this.deptTree, deptId)
    },
    changeDeptIds(ids) {
      // 清空时触发
      if (!ids.length) this.changeDeptId('')
      else this.selectDeptId = ids[ids.length - 1] || ''
    },
    deptVisibleChange(visible) {
      if (visible) return (this.selectDeptId = '')
      // 关闭时触发
      if (!this.selectDeptId) return
      const ids = this.checkedDeptIds
      this.changeDeptId(ids[ids.length - 1] || '')
    },
    changeDeptId(deptId) {
      const opt = this.queryParams
      if (deptId === opt.deptId) return
      this.queryParams = { ...opt, deptId }
      this.$emit('change', { key: 'deptId', deptId })
    },
    changeProcessType(val) {
      this.$emit('change', { key: 'processType', processType: val })
    },
    changeRdcType(val) {
      this.$emit('change', { key: 'rdcType', rdcType: val })
    },
    changeMonth(val) {
      const range = val || []
      const monthFrom = range[0] || ''
      const monthTo = range[1] || ''
      this.queryParams = { ...this.queryParams, monthFrom, monthTo }
      this.$emit('change', { key: 'monthRange', monthFrom, monthTo })
    }
  }
}
</script>
<style lang="scss" scoped>
.top-select-pc {
  background-color: white;
  padding: 12px 12px 1px;
}
// 更改占位颜色
.dept-tree /deep/ .el-input__inner:empty::placeholder {
  color: #606266;
}
</style>
